<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cylinder</title>
    <link rel="stylesheet" href="../include/style.css">
  </head>
  <body>
    <header>
      Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
    </header>
    <canvas id="canvas" width="400" height="400"></canvas>
    <aside>Move mouse on canvas element.</aside>

    <script src="../include/utils.js"></script>
    <script src="./classes/point3d.js"></script>
    <script src="./classes/triangle.js"></script>
    <script>
    window.onload = function () {
      var canvas = document.getElementById('canvas'),
          context = canvas.getContext('2d'),
          mouse = utils.captureMouse(canvas),
          points = [],
          triangles = [],
          numFaces = 20,
          fl = 250,
          vpX = canvas.width / 2,
          vpY = canvas.height / 2,
          angleX, angleY;

      for (var angle, xpos, ypos, i = 0, idx = 0; i < numFaces; i++) {              
        angle = Math.PI * 2 / numFaces * i;
        xpos = Math.cos(angle) * 200;
        ypos = Math.sin(angle) * 200;
        points[idx]   = new Point3d(xpos, ypos, -100);
        points[idx+1] = new Point3d(xpos, ypos,  100);
        idx += 2;
      }
      points.forEach(function (point) {
        point.setVanishingPoint(vpX, vpY);
        point.setCenter(0, 0, 200);
      });

      for (i = 0, idx = 0; i < numFaces - 1; i++) {
        triangles[idx]   = new Triangle(points[idx], points[idx+3], points[idx+1], "#6666cc");
        triangles[idx+1] = new Triangle(points[idx], points[idx+2], points[idx+3], "#6666cc");
        idx += 2;
      }
      
      triangles[idx]   = new Triangle(points[idx], points[1], points[idx+1], "#6666cc");
      triangles[idx+1] = new Triangle(points[idx], points[0], points[1], "#6666cc");

      function move (point) {
        point.rotateX(angleX);
        point.rotateY(angleY);
      }

      function draw (triangle) {
        triangle.draw(context);
      }

      (function drawFrame () {
        window.requestAnimationFrame(drawFrame, canvas);
        context.clearRect(0, 0, canvas.width, canvas.height);
        
        angleX = (mouse.y - vpY) * 0.0005;
        angleY = (mouse.x - vpX) * 0.0005;
        points.forEach(move);
        triangles.forEach(draw);
      }());
    };
    </script>
  </body>
</html>
